<template>
  <div id="practice">
    <div class="practice">练习</div>

    <div class="practice1">
      <div class="practice2" v-for="item in list" :key="item.id">
        <p class="practice2_1"><img :src="item.icon" alt=""></p>
        <p>{{item.name}}</p>
      </div>
    </div>

    <div class="practice3">
      <h2>近期模考</h2>
      <p class="practice3_1"><span>默认排序</span><span>时间</span></p>
      <div class="practice4">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { "id": "1", "icon": "/images/exam-point.png", "name": "考点专练" },
        { "id": "2", "icon": "/images/paper-package.png", "name": "套卷练习" },
        { "id": "3", "icon": "/images/exam.png", "name": "仿真模考" },
        { "id": "4", "icon": "/images/wrong-test.png", "name": "错题练习" },
        { "id": "5", "icon": "/images/assess.png", "name": "评测记录" },
        { "id": "6", "icon": "/images/question-collocet.png", "name": "习题收藏" },
      ],
    }
  },
}
</script>

<style scoped>
#practice {
  width: 100%;
  height: 100%;
  background: rgb(236, 236, 236);
}
.practice {
  width: 100%;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  font-size: 0.533333rem;
  background: white;
}
.practice1 {
  width: 96%;
  margin: 0 auto;
  border-radius: 0.133333rem;
  margin-top: 0.266667rem;
  background: white;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.practice2 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  width: 24%;
}
.practice2_1 {
  width: 50%;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 50%;
}
.practice2_1 img {
  width: 0.8rem;
  height: 0.8rem;
}
.practice3 {
  background: white;
  height: 9rem;
  width: 94%;
  padding: 0 3% 0 3%;
}
.practice3_1 {
  display: flex;
  justify-content: space-between;
}
.practice4 {
  width: 100%;
  height: 100%;
  background: url("/images/empty@2x.png") no-repeat center;
}
</style>